import  { useState, useEffect, useRef } from "react";
import { List, Avatar, Modal } from "antd";
import QtSingle from "./qt-single";
import { isInCrowdFundingPeriod } from "@/tool/format";

function App() {
  const [list, setList] = useState<any[]>(() =>
    JSON.parse(localStorage.getItem("crowdFundingList") || "[]")
  );
  const [modalOpen, setModalOpen] = useState(false);
  const [current, setCurrent] = useState<any>(null);
  const lastStr = useRef<string>(
    localStorage.getItem("crowdFundingList") || "[]"
  );

  // 定时轮询 localStorage
  useEffect(() => {
    const timer = setInterval(() => {
      const nowStr = localStorage.getItem("crowdFundingList") || "[]";
      if (nowStr !== lastStr.current) {
        lastStr.current = nowStr;
        setList(JSON.parse(nowStr));
      }
    }, 1500); // 每1.5秒检查一次
    return () => clearInterval(timer);
  }, []);

  const handleShowDetail = (item: any) => {
    setCurrent(item);
    setModalOpen(true);
  };

  return (
    <div style={{ maxWidth: 800, margin: "40px auto" }}>
      <List
        itemLayout="vertical"
        dataSource={list}
        renderItem={(item) => {
          const percent = item.target_value
            ? Math.min(
                100,
                Math.round(
                  ((Number(item.price) * Number(item.supported || 0)) /
                    Number(item.target_value)) *
                    100
                )
              )
            : 0;
          // 只要不是进行中或已过期都为灰色
          const isValidPeriod = isInCrowdFundingPeriod(item.time);
          const progressColor =
            item.status !== 1 || !isValidPeriod
              ? "#d9d9d9"
              : percent === 100
              ? "#52c41a"
              : "#ffc53d";
          return (
            <List.Item
              key={item.id}
              style={{
                border: "none",
                borderRadius: 18,
                marginBottom: 32,
                padding: 0,
                background: "#fff",
                display: "flex",
                alignItems: "stretch",
                boxShadow: "0 4px 24px 0 #e6eaf1",
                overflow: "hidden",
                position: "relative",
                flexDirection: "column",
                transition: "box-shadow 0.2s",
                cursor: "pointer",
              }}
              onClick={() => handleShowDetail(item)}
            >
              <div style={{ display: "flex", flex: 1 }}>
                {/* 左侧内容 */}
                <div
                  style={{
                    flex: 1,
                    padding: "28px 32px 18px 32px",
                    display: "flex",
                    flexDirection: "column",
                    justifyContent: "space-between",
                    alignItems: "flex-start",
                  }}
                >
                  <div>
                    <div
                      style={{
                        fontWeight: 800,
                        fontSize: 24,
                        color: "#222",
                        marginBottom: 10,
                        letterSpacing: 1,
                        textAlign: "left",
                      }}
                    >
                      {item.title}
                    </div>
                    <div
                      style={{
                        color: "#888",
                        marginBottom: 18,
                        fontSize: 15,
                        lineHeight: 1.7,
                        textAlign: "left",
                        maxWidth: 420,
                        wordBreak: "break-all",
                      }}
                    >
                      {item.description}
                    </div>
                    <div
                      style={{
                        fontSize: 18,
                        fontWeight: 700,
                        marginBottom: 8,
                        textAlign: "left",
                        letterSpacing: 1,
                      }}
                    >
                      <span style={{ color: "#d0021b" }}>¥{item.price}</span>
                    </div>
                  </div>
                  <div
                    style={{
                      color: "#888",
                      fontSize: 15,
                      marginTop: 36,
                      textAlign: "left",
                      fontWeight: 500,
                    }}
                  >
                    <b style={{ color: "#222", fontSize: 16 }}>
                      {item.supported}
                    </b>
                    人支持
                  </div>
                </div>
                {/* 右侧图片 */}
                <div
                  style={{
                    minWidth: 170,
                    display: "flex",
                    alignItems: "center",
                  }}
                >
                  <Avatar
                    shape="square"
                    src={item.img_link}
                    size={130}
                    style={{
                      borderRadius: 20,
                      margin: "auto",
                      boxShadow: "0 2px 12px #e6e6e6",
                    }}
                  />
                </div>
              </div>
              {/* 自定义进度条作为下边框 */}
              <div
                style={{
                  position: "relative",
                  width: "100%",
                  height: 28,
                  background: "transparent",
                  borderRadius: "0 0 18px 18px",
                  overflow: "visible",
                  display: "flex",
                  alignItems: "center",
                  padding: "0 24px 0 32px",
                  boxSizing: "border-box",
                  marginTop: 2,
                  marginBottom: 6,
                }}
              >
                <div
                  style={{
                    flex: 1,
                    height: 6,
                    background: "#f2f4f8",
                    borderRadius: 6,
                    overflow: "hidden",
                    position: "relative",
                  }}
                >
                  <div
                    style={{
                      height: "100%",
                      width: `${percent}%`,
                      background: progressColor,
                      borderRadius: 6,
                      transition: "width 0.4s",
                    }}
                  />
                </div>
                <span
                  style={{
                    marginLeft: 16,
                    color: progressColor,
                    fontWeight: 700,
                    fontSize: 16,
                    padding: "0 10px",
                    minWidth: 48,
                    textAlign: "center",
                  }}
                >
                  {percent}%
                </span>
              </div>
            </List.Item>
          );
        }}
        locale={{ emptyText: "暂无众筹项目" }}
      />
      {/* 弹出详情层 */}
      <Modal
        open={modalOpen}
        onCancel={() => setModalOpen(false)}
        footer={null}
        width={520}
        destroyOnHidden
        styles={{ body: { padding: 0, background: "#f7f8fa" } }}
      >
        {current && <QtSingle data={current} />}
      </Modal>
    </div>
  );
}

export default App;
